<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!-- <u-navbar title="全部房源" :autoBack="true" :fixed="true" :bgColor="'#ffffff'" :placeholder="true" :titleStyle="{
				color: '#333',
				fontSize: '16px',
			}"></u-navbar> -->

		<!-- 搜索框 -->
		<view class="search-box">
			<u-search v-model="form.keyword" placeholder="请输入关键字搜索" :showAction="false" shape="round"
				 height="72rpx" @search="searchText(e)">
				<template #prefix>
					<u-icon name="search" size="32" color="#999"></u-icon>
				</template>
			</u-search>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" v-for="(item, index) in filterTabs" :key="index" @click="handleFilter(index)">
				<text :class="{ active: currentTab === index }">{{ item.name }}</text>
				<u-icon :name="currentTab === index ? 'arrow-up' : 'arrow-down'" size="12" color="#666"></u-icon>
			</view>
		</view>

		<!-- 房源列表 -->
		<view class="house-list">
			<view class="house-item" v-for="(item, index) in houseList" :key="index" @click="toDetail(item)">
				<view class="house-type" v-if="item.type_text">{{ item.type_text }}</view>
				<image class="house-image" :src="item.images[0]" mode="aspectFill"></image>
				<view class="house-info">
					<view class="house-title">{{ item.name }}</view>
					<view class="house-attrs">
						<text>{{ item.floor }}楼</text>
						<text>{{ item.area }}m²</text>
						<text>{{ item.house_type_text }}</text>
					</view>
					<view class="house-tags">
						<text v-for="(tag, tagIndex) in item.tags_text" :key="tagIndex">{{ tag }}</text>
					</view>
					<view class="house-price">
						<text class="symbol">¥</text>
						<text class="price">{{ item.rent }}</text>
						<text class="unit">/月</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" style="background-color: #ffffff;">
			<view class="filter_box" style="background-color: #ffffff;">
				<view class="filter_option">
					<view class="option-item1" v-if="currentTab == 0">
						<view class="filter_option_item" :class="{ active: filterTabs[0].value === i + 1 }"
							v-for="(item, i) in sortList" @click="selectOption1(item)">
							{{ item.label }}
						</view>
					</view>
					<view class="two_level_option" v-if="currentTab == 1">
						<view class="options">
							<view class="leftoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="lefttext" @click="leftTab('', 0)"
										:class="{ active: leftcurrentTab === 0 }">
										全部区域
									</view>
									<view class="lefttext" :key="item.value" v-for="(item, i) in communityList"
										@click="leftTab(item.value, i + 1)"
										:class="{ active: leftcurrentTab === i + 1 }">
										{{ item.name }}
									</view>
								</scroll-view>
							</view>
							<view class="rightoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="righttext" :key="item.id" v-for="(item, i) in streetList"
										@click="rightTab(item, i)" :class="{ active: rightcurrentTab === i }">{{
											item.name }}
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="areaCancel">重置</view>
							<view class="btn primary-btn" @click="areaConfirm">确定</view>
						</view>
					</view>
					<view class="house_type" v-if="currentTab == 2">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="house_type_option" style="padding-bottom: 20rpx;">
								<view class="title">
									居室
								</view>
								<view class="options"
									style="display: flex;align-items: center;font-size: 25rpx;color: #999;">
									<u--input border="bottom" v-model="form.room_num" type="digit"></u--input>室
									<u--input border="bottom" v-model="form.ting_num" type="digit"></u--input>厅
									<u--input border="bottom" v-model="form.toilet_num" type="digit"></u--input>卫
								</view>
							</view>
							<view class="house_type_option" :key="i" v-for="(item, i) in houseTypeOption">
								<view class="title">
									{{ item.name }}
								</view>
								<view class="options">
									<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
										v-for="(option, j) in item.options" @click="handleChecked(item.type, option)">
										{{ option.name }}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="houseTypeCancel">重置</view>
							<view class="btn primary-btn" @click="houseTypeConfirm">确定</view>
						</view>
					</view>
					<view class="rent_type" v-if="currentTab == 3">
						<view class="rent_type_option">
							<view class="options" :class="{ active: rentcurrentTab === i }" :key="i"
								v-for="(item, i) in rentTypeOption" @click="handleRentSelect(item, i)">
								{{ item }}
							</view>
						</view>
						<view class="custom_rent">
							<view class="title"> 自定义价格 </view>
							<view class="slider">
								<u-slider v-model="customRentValue" step="100" min="0" max="10000"
									@change="customRentChange"></u-slider>
							</view>
							<view class="show_value">
								<text>0</text>
								<text>{{ customRentValue }}元</text>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="rentTypeCancel">重置</view>
							<view class="btn primary-btn" @click="rentTypeConfirm">确定</view>
						</view>
					</view>
					<view class="tags_type" v-if="currentTab == 4">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="tags_type_option" :key="i" v-for="(item, i) in tagsList">
								<view class="tag_options">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="options">
										<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
											v-for="(option, j) in item.options"
											@click="handleTagChecked(item.type, option)">
											{{ option.name }}
										</view>
									</view>
								</view>
							</view>
							<view class="form-item" style="padding: 0 20rpx;margin: 20rpx;">
								<view class="title required">押金</view>
								<view class="input-group">
									<view class="input" style="width: 100%;" @click="showPaymentPicker = true">
										{{ form.payment_type ? formatDataList(form.payment_type, paymentTypeList[0]) :
											'请选择' }}
									</view>
									<!-- <input v-model="dataForm.price" placeholder="输入房租" class="input" type="digit" /> -->
								</view>
								<!-- <view class="unit">元/月</view> -->
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="tagsTypeCancel">重置</view>
							<view class="btn primary-btn" @click="tagsTypeConfirm">确定</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-loadmore :status="status" style="margin-top: 20px;" />
		<u-picker :show="showPaymentPicker" :columns="paymentTypeList" keyName="name"
			@cancel="showPaymentPicker = false" @confirm="confirmSelectPayment"></u-picker>
	</view>
</template>

<script>
import {
	getHouses
} from '@/api/houseresources.js'
import {
	getArea,
	getTagList
} from '@/api/gent.js'
import {
	getHouseOptionList
} from '@/api/mine.js'
export default {
	data() {
		return {
			showPaymentPicker: false,
			status: 'loadmore',
			queryparams: {
				page: 1,
				page_size: 10
			},
			form: {
				community: null,
				street: null,
				rent: null,
				keyword: null,
				order_tpe: null,
				house_type: [],
				face: [],
				floor: null,
				tags: [],
				decoration: null,
				payment_type: [],
			},
			paymentTypeList: [
				[{
					name: "押一付一",
					type: "押一付一",
				},
				{
					name: "押一付二",
					type: "押一付二",
				}, {
					name: "押一付三",
					type: "押一付三",
				}, {
					name: "押二付一",
					type: "押二付一",
				}, {
					name: "押二付二",
					type: "押二付二",
				}, {
					name: "押二付三",
					type: "押二付三",
				}, {
					name: "押三付一",
					type: "押三付一",
				}, {
					name: "押零付一",
					type: "押零付一",
				}
				]
			],
			filterTabs: [{
				name: "综合排序",
				value: 1,
			},
			{
				name: "区域",
				value: "",
			},
			{
				name: "户型",
				value: "",
			},
			{
				name: "租金",
				value: "",
			},
			{
				name: "更多",
				value: "",
			},
			],
			currentTab: null,
			leftcurrentTab: 0,
			rightcurrentTab: -1,
			rentcurrentTab: 0,
			sortList: [{
				label: "综合排序",
				value: 1,
			}, {
				label: "最新发布",
				value: 2,
			}, {
				label: "好评优先",
				value: 3,
			}, {
				label: "价格(从低到高)",
				value: 4,
			}, {
				label: "价格(从高到低)",
				value: 5,
			}, {
				label: "面积(从小到大)",
				value: 6,
			}, {
				label: "面积(从大到小)",
				value: 7,
			}, {
				label: "楼层(从高到低)",
				value: 8,
			}, {
				label: "楼层(从低到高)",
				value: 9,
			}],
			streetList: [],
			communityList: [],
			houseTypeOption: [
				// {
				// 	type: 1,
				// 	name: '居室',
				// 	options: []
				// },
				// {
				// 	type: 2,
				// 	name: '朝向',
				// 	options: [{
				// 		name: '东',
				// 		value: 4,
				// 		ischeck: false
				// 	}, {
				// 		name: '西',
				// 		value: 5,
				// 		ischeck: false
				// 	}, {
				// 		name: '南',
				// 		value: 6,
				// 		ischeck: false
				// 	}, {
				// 		name: '北',
				// 		value: 7,
				// 		ischeck: false
				// 	}, {
				// 		name: '东南',
				// 		value: 8,
				// 		ischeck: false
				// 	}, {
				// 		name: '西南',
				// 		value: 9,
				// 		ischeck: false
				// 	}, {
				// 		name: '东北',
				// 		value: 10,
				// 		ischeck: false
				// 	}, {
				// 		name: '西北',
				// 		value: 11,
				// 		ischeck: false
				// 	}]
				// },
				{
					type: 3,
					name: '楼层',
					options: [{
						name: '1-3层',
						value: '1-3',
						ischeck: false
					}, {
						name: '4-5层',
						value: '4-5',
						ischeck: false
					}, {
						name: '6层以上',
						value: '6-99',
						ischeck: false
					}]
				}
			],
			rentTypeOption: [
				'不限',
				'1000元以下',
				'1000元-2000元',
				'2000元-3000元',
				'3000元-5000元',
				'5000元以上'
			],
			customRentValue: 0,
			tagsList: [{
				name: '特色标签',
				type: 1,
				options: []
			},
				// {
				// 	name: '装修',
				// 	type: 2,
				// 	options: [{
				// 		name: '精装修',
				// 		value: 2,
				// 		ischeck: false
				// 	}, {
				// 		name: '普通装修',
				// 		value: 1,
				// 		ischeck: false
				// 	}]
				// },
				// {
				// 	name: '付款',
				// 	type: 3,
				// 	options: [{
				// 		name: '押一付三',
				// 		value: 1,
				// 		ischeck: false
				// 	}, {
				// 		name: '押二付一',
				// 		value: 2,
				// 		ischeck: false
				// 	}, {
				// 		name: '押三付一',
				// 		value: 3,
				// 		ischeck: false
				// 	}, {
				// 		name: '押一付二',
				// 		value: 4,
				// 		ischeck: false
				// 	}]
				// },
			],
			houseList: [],
		};
	},
	onLoad(e) {
		this.form.community = e.community
		this.getList();
		this.getAreaList();
		this.getHouseOptionLists()
	},
	methods: {
		// 选择押付方式
		confirmSelectPayment(event) {
			this.form.payment_type = event.value[0].type;
			this.showPaymentPicker = false;
		},
		formatDataList(data, list) {
			if (!data || !list || !Array.isArray(list)) {
				return '';
			}
			const item = list.find(item => item.type == data);
			return item ? item.name : '';
		},
		handleFilter(index) {
			this.currentTab = index;
			this.$refs.popup.open("top");
		},
		searchText(e){
			this.queryparams.page = 1
			this.getList()
		},
		selectOption1(option) {
			this.filterTabs[this.currentTab].name = option.label;
			this.filterTabs[this.currentTab].value = option.value;
			this.$refs.popup.close();
			this.form.order_tpe = option.value
			this.queryparams.page = 1
			this.getList()
			// 处理筛选逻辑
		},
		leftTab(id, index) {
			this.leftcurrentTab = index;
			if (id !== '') {
				this.form.community = id;
				this.getStreetList(id)
			} else {
				this.form.street = null;
				this.form.community = null;
				this.streetList = [];
			}
		},
		rightTab(item, index) {
			this.rightcurrentTab = index;
			this.form.street = item.id;
			this.filterTabs[this.currentTab].name = item.name;
		},
		areaCancel() {
			this.leftcurrentTab = 0;
			this.rightcurrentTab = 0;
			this.streetList = [];
			this.form.street = '';
			this.form.community = ''
			this.queryparams.page = 1
			this.getList()
			this.$refs.popup.close();
		},
		areaConfirm() {
			this.queryparams.page = 1
			this.getList()
			this.$refs.popup.close();
		},
		handleChecked(type, item) {
			item.ischeck = !item.ischeck
			if (item.ischeck) {
				if (type == 1) {
					this.form.house_type.push(item.value)
				}
				if (type == 2) {
					this.form.face.push(item.value)
				}
				if (type == 3) {
					// this.houseTypeOption[2]
					this.houseTypeOption[0].options.forEach((option) => {
						option.ischeck = false
					})
					item.ischeck = !item.ischeck
					this.form.floor = item.value
				}

			} else {
				if (type == 1) {
					this.form.house_type = this.form.house_type.filter(data => data !== item.value);
				}
				if (type == 2) {
					this.form.face = this.form.face.filter(data => data !== item.value);
				}
				if (type == 3) {
					this.form.floor = ''
				}
			}
		},
		houseTypeCancel() {
			this.houseTypeOption.forEach((item) => {
				item.options.forEach((option) => {
					option.ischeck = false
				})
			})
			this.queryparams.page = 1
			this.form.house_type = []
			this.form.face = []
			this.form.floor = []
			this.$refs.popup.close();
			this.getList()
		},
		houseTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1
			this.getList()
		},
		handleRentSelect(option, index) {
			this.rentcurrentTab = index
			switch (option) {
				case "不限":
					this.form.rent = ""
					break;
				case "1000元以下":
					this.form.rent = "0-1000"
					break;
				case "1000元-2000元":
					this.form.rent = "1000-2000"
					break;
				case "2000元-3000元":
					this.form.rent = "2000-3000"
					break;
				case "3000元-5000元":
					this.form.rent = "3000-5000"
					break;
				case "5000元以上":
					this.form.rent = "5000-99999"
					break;
			}
		},
		customRentChange(event) {
			if (event > 0) {
				this.rentcurrentTab = -1
				this.form.rent = '0-' + event
			}
		},
		rentTypeCancel() {
			this.rentcurrentTab = 0
			this.form.rent = ''
			this.$refs.popup.close();
			this.getList()
		},
		rentTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1
			this.getList()
		},
		handleTagChecked(type, item) {
			item.ischeck = !item.ischeck
			if (item.ischeck) {
				if (type == 1) {
					this.form.tags.push(item.value)
				}
				if (type == 2) {
					this.form.decoration = item.value;
					this.tagsList[1].options.forEach((option) => {
						option.ischeck = false
					})
					item.ischeck = true;
				}
				if (type == 3) {
					this.tagsList[2].options.forEach((option) => {
						option.ischeck = false
					})
					item.ischeck = true;
					this.form.payment_type = item.value
				}
			} else {
				if (type == 1) {
					this.form.tags = this.form.house_type.filter(data => data !== item.value);
				}
				if (type == 2) {
					this.form.face = ''
				}
				if (type == 3) {
					this.form.payment_type = ''
				}
			}
		},
		tagsTypeCancel() {
			this.rentcurrentTab = 0
			this.form.tags = []
			this.form.decoration = ''
			this.form.payment_type = []
			this.$refs.popup.close();
			this.getList()
		},
		tagsTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1
			this.getList()
		},
		getAreaList() {
			getHouseOptionList({
				cid: 2
			}).then((res) => {
				this.communityList = Object.entries(res.data.data).map(([key, value]) => ({
					name: value,
					value: key
				}));
				console.log(this.streetList)
				if (this.form.community && this.form.community != '') {
					this.communityList.forEach((item, i) => {
						if (item.value == this.form.community) {
							this.leftTab(this.form.community, i + 1)
						}
					})
				}
			})
		},
		getStreetList(id) {
			getHouseOptionList({
				cid: 3,
				pid: id
			}).then((res) => {
				this.streetList = Object.entries(res.data.data).map(([key, value]) => ({
					name: value,
					id: key
				}));
			})
		},
		getHouseOptionLists() {
			Promise.all([
				getHouseOptionList({
					cid: 5
				}),
				getHouseOptionList({
					cid: 7
				}),
				getHouseOptionList({
					cid: 8
				})
			]).then(([res1, res2, res3]) => {
				if (res1.data.msg == 'success') {
					// this.houseTypeOption[0].options = Object.entries(res1.data.data).map(([key, value]) => ({
					// 	name: value,
					// 	value: key,
					// 	ischeck: false
					// }));
				}
				if (res2.data.msg == 'success') {
					// this.tagsList[2].options = Object.entries(res2.data.data).map(([key, value]) => ({
					// 	name: value,
					// 	value: key,
					// 	ischeck: false
					// }));
				}
				if (res3.data.msg == 'success') {
					this.tagsList[0].options = Object.entries(res3.data.data).map(([key, value]) => ({
						name: value,
						value: key,
						ischeck: false
					}));
				}
			})
		},
		syncValidFields(sourceObj, targetObj) {
			// 遍历源对象的所有属性
			for (const key in sourceObj) {
				if (sourceObj.hasOwnProperty(key)) {
					const value = sourceObj[key];
					let isValid = false;

					// 判断字段有效性
					if (value !== null && value !== undefined) {
						// 处理数组/字符串类型
						if (typeof value === 'string' || Array.isArray(value)) {
							isValid = value.length > 0;
						}
						// 处理对象类型（非null且非数组）
						else if (typeof value === 'object') {
							isValid = Object.keys(value).length > 0;
						}
						// 处理基础类型
						else {
							isValid = true;
						}
					}

					// 同步到目标对象
					if (isValid) {
						targetObj[key] = value;
					} else {
						// 检查并删除无效字段
						if (targetObj.hasOwnProperty(key)) {
							delete targetObj[key];
						}
					}
				}
			}
			return targetObj;
		},
		getList() {
			this.syncValidFields(this.form, this.queryparams);
			if(this.queryparams.page == 1) this.houseList = []
			getHouses(this.queryparams).then((res) => {
				console.log(res)
				console.log(this.houseList)
				let houseList = res.data.data.data
				this.houseList = this.houseList.concat(houseList)
				// 更新状态
				this.status = this.houseList.length < this.queryparams.page_size ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh(); // 停止下拉刷新
			})
		},
		toDetail(item) {
			uni.navigateTo({
				url: `/pages-house/house-detail/house-detail?id=${item.id}`,
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.queryparams.page = 1; // 重置为第一页
			this.houseList = []; // 清空当前列表数据
			this.getList(); // 请求第一页数据
			uni.stopPullDownRefresh(); // 停止下拉刷新
		},
		//上拉加载
		onReachBottom() {
			if (this.status === 'loading' || this.status === 'nomore') return;
			this.status = 'loading';
			this.queryparams.page++; // 增加当前页码
			this.getList();
		},
	},
};
</script>

<style lang="less" scoped>
.container {
	min-height: 100vh;
	background: #f5f6fa;
	padding-bottom: 24rpx;
	padding-top: 230rpx;
}

.search-box {
	padding: 24rpx;
	background: #fff;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
	position: fixed;
}

.filter-bar {
	top: 122rpx;
	left: 0;
	right: 0;
	z-index: 999999;
	position: fixed;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 88rpx;
	background: #fff;
	margin-bottom: 24rpx;

	.filter-item:nth-child(2) {
		display: none;
	}

	.filter-item {
		display: flex;
		align-items: center;

		text {
			font-size: 26rpx;
			color: #666;
			margin-right: 4rpx;

			&.active {
				color: #2979ff;
				font-weight: 500;
			}
		}
	}
}

.house-list {
	padding: 0 24rpx;

	.house-item {
		display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		position: relative;

		.house-image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
		}

		.house-type {
			position: absolute;
			left: 24rpx;
			top: 24rpx;
			padding: 4rpx 12rpx;
			background: #2979ff;
			color: #fff;
			font-size: 20rpx;
			border-radius: 4rpx;
			z-index: 1;
		}

		.house-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.house-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
				line-height: 1.4;
				margin-bottom: 12rpx;
			}

			.house-attrs {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				color: #999;
				font-size: 24rpx;

				text {
					position: relative;
					margin-right: 24rpx;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: -12rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 2rpx;
						height: 20rpx;
						background: #e5e5e5;
					}
				}
			}

			.house-tags {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 12rpx;
				gap: 12rpx;

				text {
					padding: 2rpx 12rpx;
					background: #f7f8fa;
					color: #666;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
			}

			.house-price {
				display: flex;
				align-items: baseline;

				.symbol {
					font-size: 24rpx;
					color: #ff5a5f;
					font-weight: 500;
				}

				.price {
					font-size: 32rpx;
					color: #ff5a5f;
					font-weight: 500;
				}

				.unit {
					font-size: 22rpx;
					color: #999;
					margin-left: 4rpx;
				}
			}
		}
	}
}

.filter_box {
	left: 0;
	right: 0;
	top: 206rpx;
	position: absolute;

	.filter_option {
		width: 100%;
		height: auto;

		.option-item1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 24rpx;

			.filter_option_item {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;

				&.active {
					color: #0095F8;
					background: #F5F6FA;
					border-radius: 36rpx;
				}
			}
		}

		.two_level_option {
			width: 100%;
			height: 800rpx;
			background-color: #ffffff;

			.options {
				display: flex;
				justify-content: flex-start;
				height: calc(100% - 168rpx);

				.leftoption {
					height: 100%;
					display: flex;
					box-sizing: border-box;
					padding: 36rpx 24rpx;
					flex-direction: column;
					justify-content: space-between;
					border-right: 4rpx solid #F5F6FA;

					.lefttext {
						width: 208rpx;
						height: 72rpx;
						box-sizing: border-box;
						line-height: 72rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						border-radius: 12rpx;

						&.active {
							background: #F5F6FA;
							color: #0095F8;
						}
					}
				}

				.rightoption {
					height: 100%;
					flex: 1;
					display: flex;
					padding: 36rpx 24rpx;
					box-sizing: border-box;
					flex-direction: column;
					justify-content: space-between;

					.righttext {
						box-sizing: border-box;
						width: 100%;
						text-align: center;
						height: 72rpx;
						line-height: 72rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						padding: 0 40rpx;

						&.active {
							background: #F5F6FA;
							color: #0095F8;
						}
					}
				}

				.similar-list {
					height: 100%;
				}
			}
		}

		.house_type {
			width: 100%;
			height: 930rpx;
			padding: 40rpx 0;
			background-color: #ffffff;
			box-sizing: border-box;
			overflow-y: scroll;

			.house_type_option {
				padding: 0 40rpx;
				box-sizing: border-box;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 40rpx;
					margin-bottom: 24rpx;
				}

				.options {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-start;

					.option-item {
						width: 208rpx;
						height: 68rpx;
						margin-bottom: 24rpx;
						margin-right: 24rpx;
						line-height: 68rpx;
						background: #F5F6FA;
						border-radius: 38rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.ischeck {
							background-color: #b2c1ff;
						}
					}
				}
			}
		}

		.rent_type {
			width: 100%;
			height: 880rpx;
			padding: 40rpx 0;
			background-color: #ffffff;
			box-sizing: border-box;

			.rent_type_option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;

				.options {
					width: 100%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;

					&.active {
						color: #0095F8;
						background: #F5F6FA;
						border-radius: 36rpx;
					}
				}
			}

			.custom_rent {
				width: 100%;
				height: 200rpx;
				padding: 32rpx;
				margin-top: 16rpx;
				background: #F5F6FA;
				border-radius: 38rpx;
				box-sizing: border-box;

				.title {
					line-height: 40rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
				}

				.show_value {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.tags_type {
			width: 100%;
			height: 880rpx;
			overflow-y: auto;
			padding: 40rpx 0;
			background-color: #ffffff;
			box-sizing: border-box;

			.tags_type_option_list {
				height: calc(100% - 168rpx);

				.tags_type_option {
					padding: 0 40rpx;
					box-sizing: border-box;

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 40rpx;
						margin-bottom: 24rpx;
					}

					.options {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: flex-start;

						.option-item {
							width: 208rpx;
							height: 68rpx;
							margin-bottom: 24rpx;
							margin-right: 24rpx;
							line-height: 68rpx;
							background: #F5F6FA;
							border-radius: 38rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&:nth-child(3n) {
								margin-right: 0;
							}

							&.ischeck {
								background-color: #b2c1ff;
							}
						}
					}
				}

			}
		}

		.btns-group {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 320rpx;
				height: 88rpx;
				line-height: 88rpx;
				box-sizing: border-box;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				text-align: center;

				&.default-btn {
					color: #0095F8;
					border: 2rpx solid #0095F8;
				}

				&.primary-btn {
					color: #FFFFFF;
					background: #0095F8;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
				}
			}
		}

	}
}
.form-item {
	padding: 30rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		width: 180rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.count-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;

		.count-decrease,
		.count-increase {
			width: 48rpx;
			height: 48rpx;
		}

		.count-number {
			width: 60rpx;
			text-align: center;
			font-size: 26rpx;
			margin: 0rpx 10rpx;
		}
	}

	// .required::after {
	// 	content: '*';
	// 	color: #FE4F04;
	// 	padding-left: 10rpx;
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// }

	.unit {
		font-size: 28rpx;
		color: #222222;
		margin-left: 20rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		gap: 40rpx;
		width: 100%;
	}

	.input {
		width: 200rpx;
		text-align: center;
		height: 48rpx;
		background: #F5F6FA;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 48rpx;
	}

	.value-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		margin-left: 10rpx;

		.value-info {
			font-size: 28rpx;
			color: #222222;
		}
	}

}
</style>